<template>
  <div class="app-container">
    <div class="search-container">
      <!-- <el-form :inline="true">
        <el-form-item>
          <el-input
            prefix-icon="el-icon-search"
            type="text"
            style="width: 500px"
            placeholder="请输入关键词..."
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="search-button">搜索</el-button>
        </el-form-item>
      </el-form> -->
      <el-form v-if="checkPermission(['校内老师', '企业导师'])">
        <el-form-item>
          <router-link to="/standard/addStandard">
            <el-button type="primary">新增标准</el-button>
          </router-link>
        </el-form-item>
      </el-form>
    </div>
    <div class="standard-list-container">
      <el-table
        :data="list"
        class="list-table"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="序号" min-width="30%" align="center">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="标准号" min-width="70%" align="center">
          <template slot-scope="scope">
            {{ scope.row.number }}
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="标准名" min-width="70%" align="center">
          <template slot-scope="scope">
            <el-link type="info" :underline="false" @click="viewMaintext(scope.row)">
              {{ scope.row.sname }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="类别" min-width="70%" align="center">
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>
        <el-table-column label="发布日期" min-width="60%" align="center">
          <template slot-scope="scope">
            {{ scope.row.reldate }}
          </template>
        </el-table-column>
        <el-table-column label="实施日期" min-width="60%" align="center">
          <template slot-scope="scope">
            {{ scope.row.endate }}
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="起草单位" min-width="80%" align="center">
          <template slot-scope="scope">
            {{ scope.row.drdepart }}
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="发布单位" min-width="80%" align="center">
          <template slot-scope="scope">
            {{ scope.row.reldepart }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="180%">
          <template slot-scope="{row}">
            <el-button type="success" size="mini" @click="searchDetail(row)">详细信息</el-button>
            <el-button type="primary" size="mini" @click="downloadStandardAttach(row)">附件下载</el-button>
            <el-button v-if="checkPermission(['校内老师', '企业导师'])" type="info" size="mini" @click="handleEditStandard(row)">编辑</el-button>
            <el-button v-if="checkPermission(['校内老师', '企业导师'])" type="warning" size="mini" @click="handleDeleteStandard(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />

    <!-- 行业标准正文对话框 -->
    <el-dialog title="行业标准正文" :visible.sync="dialogFormVisible" class="content-dialog-container">
      <div>
        <p v-html="content">
          {{ content }}
        </p>
      </div>
    </el-dialog>

    <!-- 行业标准详细信息对话框 -->
    <el-dialog title="详细信息" :visible.sync="dialogStandardDetailInfo">
      <div>
        <el-descriptions>
          <el-descriptions-item label="标准号">{{ standardDetail.number }}</el-descriptions-item>
          <el-descriptions-item label="标准名">{{ standardDetail.sname }}</el-descriptions-item>
          <el-descriptions-item label="类别">{{ standardDetail.type }}</el-descriptions-item>
          <el-descriptions-item label="发布日期">{{ standardDetail.reldate }}</el-descriptions-item>
          <el-descriptions-item label="实施日期">{{ standardDetail.endate }}</el-descriptions-item>
          <el-descriptions-item label="起草单位">{{ standardDetail.drdepart }}</el-descriptions-item>
          <el-descriptions-item label="发布单位">{{ standardDetail.reldepart }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div>
        <span>正文内容:</span>
        <p v-html="standardDetail.maintext">
          {{ standardDetail.maintext }}
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStandardList, searchDetailInfo, downloadAttach, deleteStandard } from '@/api/standard'
import pagination from '@/components/Pagination'
import checkPermission from '@/utils/permission'
import { downloadAttachs } from '@/utils/download'

export default {
  name: 'StandardList',
  components: { pagination },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      list: null,
      content: '',
      standardDetail: {
        sname: '',
        number: '',
        type: '',
        reldepart: '',
        drdepart: '',
        endate: '',
        maintext: '',
        reldate: ''
      },
      dialogStandardDetailInfo: false,
      dialogFormVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    checkPermission,
    fetchData() {
      getStandardList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
      }).catch(() => {
        this.$message.error('获取行业标准列表错误')
      })
    },
    viewMaintext(row) {
      this.dialogFormVisible = true
      searchDetailInfo(row.number).then(res => {
        this.content = res.data.maintext
      }).catch(() => {
        this.$message.error('获取正文内容错误，请稍后再试')
      })
    },
    searchDetail(row) {
      this.dialogStandardDetailInfo = true
      searchDetailInfo(row.number).then(res => {
        this.standardDetail = res.data
      })
    },
    // 下载行业标准附件
    downloadStandardAttach(row) {
      downloadAttach(row.number).then(res => {
        downloadAttachs(res)
      })
    },
    // 编辑行业标准信息
    handleEditStandard(row) {
      const standardNumber = row.number
      window.localStorage.setItem('number', standardNumber)
      this.$router.push('/standard/edit')
    },
    // 删除行业标准
    handleDeleteStandard(row) {
      deleteStandard(row.number).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '删除行业标准成功',
            type: 'success'
          })
          this.fetchData()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.search-container {
  margin-left: 20px;
}

</style>
